<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML5 | fengrixin</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <script>
         (function(){
            var html = document.createElement('script');
            html.src = 'https://www.googletagmanager.com/gtag/js?id=UA-166891571-1';
            var script = document.getElementsByTagName('script')[0]'
            script.parentNode.insertBefore(html, script);
            
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments)}
            gtag('js', new Date());
            gtag('config', 'UA-166891571-1');
         })();
        </script>
    <meta name="description" content="I don't know anything with certainty, but seeing the stars makes me dream.">
    <meta name="keywords" content="冯日新, fengrixin, rixin, 飘渺云轩">
    <meta name="author" content="rixin, s2675563468, fengrixin@yeah.net">
    <meta name="copyright" content="rixin">
    <meta name="renderer" content="webkit">
    
    <link rel="preload" href="/assets/css/0.styles.52cdc27a.css" as="style"><link rel="preload" href="/assets/js/app.0696c23a.js" as="script"><link rel="preload" href="/assets/js/2.96f039f8.js" as="script"><link rel="preload" href="/assets/js/15.e0473034.js" as="script"><link rel="prefetch" href="/assets/js/10.473b7d15.js"><link rel="prefetch" href="/assets/js/11.0c193dec.js"><link rel="prefetch" href="/assets/js/12.c4d9d484.js"><link rel="prefetch" href="/assets/js/13.dce50cfa.js"><link rel="prefetch" href="/assets/js/14.eecb5cc3.js"><link rel="prefetch" href="/assets/js/16.25b14741.js"><link rel="prefetch" href="/assets/js/17.c016c8f3.js"><link rel="prefetch" href="/assets/js/18.71195568.js"><link rel="prefetch" href="/assets/js/19.1dfd44c0.js"><link rel="prefetch" href="/assets/js/20.abde37ca.js"><link rel="prefetch" href="/assets/js/21.af59917b.js"><link rel="prefetch" href="/assets/js/22.d2f7b52b.js"><link rel="prefetch" href="/assets/js/23.ec5c07a5.js"><link rel="prefetch" href="/assets/js/24.eae97f7d.js"><link rel="prefetch" href="/assets/js/25.2f09818a.js"><link rel="prefetch" href="/assets/js/26.7ae2d77c.js"><link rel="prefetch" href="/assets/js/27.a3963c70.js"><link rel="prefetch" href="/assets/js/28.eadcc4e5.js"><link rel="prefetch" href="/assets/js/29.61cf8d1d.js"><link rel="prefetch" href="/assets/js/3.dd8204a7.js"><link rel="prefetch" href="/assets/js/30.7db889fa.js"><link rel="prefetch" href="/assets/js/31.fb075f3c.js"><link rel="prefetch" href="/assets/js/4.cf123337.js"><link rel="prefetch" href="/assets/js/5.abe0fc83.js"><link rel="prefetch" href="/assets/js/6.d9ded6eb.js"><link rel="prefetch" href="/assets/js/7.a054e416.js"><link rel="prefetch" href="/assets/js/8.f0b3a07f.js"><link rel="prefetch" href="/assets/js/9.f6495dca.js">
    <link rel="stylesheet" href="/assets/css/0.styles.52cdc27a.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">fengrixin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" class="nav-link">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="地基" class="dropdown-title"><span class="title">地基</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/algorithm/" class="nav-link">数据结构和算法</a></li><li class="dropdown-item"><!----> <a href="/learn/browser/" class="nav-link">浏览器工作原理</a></li><li class="dropdown-item"><!----> <a href="/learn/js/es6.html" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/learn/css/" class="nav-link">CSS</a></li><li class="dropdown-item"><!----> <a href="/learn/html/" aria-current="page" class="nav-link router-link-exact-active router-link-active">HTML</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="楼层" class="dropdown-title"><span class="title">楼层</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/vue/" class="nav-link">Vue</a></li><li class="dropdown-item"><!----> <a href="/learn/node/" class="nav-link">Node.js</a></li><li class="dropdown-item"><!----> <a href="/learn/mini/index.html" class="nav-link">小程序</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="电梯" class="dropdown-title"><span class="title">电梯</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/learn/tools/chain.html" class="nav-link">工具链</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/publish.html" class="nav-link">发布系统</a></li><li class="dropdown-item"><!----> <a href="/learn/tools/monitor.html" class="nav-link">监控系统</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="看一看" class="dropdown-title"><span class="title">看一看</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>仓库</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/watch/repository.html" class="nav-link">第三方库</a></li><li class="dropdown-subitem"><a href="/watch/website.html" class="nav-link">好玩的网站</a></li><li class="dropdown-subitem"><a href="/watch/article.html" class="nav-link">牛掰的文章</a></li><li class="dropdown-subitem"><a href="/watch/plugin.html" class="nav-link">扩展&amp;插件</a></li></ul></li><li class="dropdown-item"><h4>作品</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="http://www.5you.com/apk/384161.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微冷知识
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="https://github.com/fengrixin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/learn/html/" aria-current="page" class="active sidebar-link">HTML5</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/html/#语义化" class="sidebar-link">语义化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/html/#defer-和-async-的区别" class="sidebar-link">defer 和 async 的区别</a></li></ul></li><li class="sidebar-sub-header"><a href="/learn/html/#面试题" class="sidebar-link">面试题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/learn/html/#假设高度已知-请写出三栏布局-其中左栏、右栏宽度各为-300px-中间自适应" class="sidebar-link">假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应</a></li><li class="sidebar-sub-header"><a href="/learn/html/#ccs-盒模型" class="sidebar-link">CCS 盒模型</a></li><li class="sidebar-sub-header"><a href="/learn/html/#dom-事件" class="sidebar-link">DOM 事件</a></li><li class="sidebar-sub-header"><a href="/learn/html/#http" class="sidebar-link">HTTP</a></li><li class="sidebar-sub-header"><a href="/learn/html/#原型链" class="sidebar-link">原型链</a></li><li class="sidebar-sub-header"><a href="/learn/html/#通信" class="sidebar-link">通信</a></li><li class="sidebar-sub-header"><a href="/learn/html/#安全" class="sidebar-link">安全</a></li><li class="sidebar-sub-header"><a href="/learn/html/#渲染机制" class="sidebar-link">渲染机制</a></li><li class="sidebar-sub-header"><a href="/learn/html/#运行机制" class="sidebar-link">运行机制</a></li><li class="sidebar-sub-header"><a href="/learn/html/#页面性能" class="sidebar-link">页面性能</a></li><li class="sidebar-sub-header"><a href="/learn/html/#错误监控" class="sidebar-link">错误监控</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="语义化"><a href="#语义化" class="header-anchor">#</a> 语义化</h2> <h3 id="defer-和-async-的区别"><a href="#defer-和-async-的区别" class="header-anchor">#</a> defer 和 async 的区别</h3> <ul><li>defer：渲染完再执行</li></ul> <p>要等到整个页面在内存中正常渲染结束（DOM 结构完全生成以及其他脚本执行完成）才会执行，多个 defer 脚本会按照它们在页面出现的顺序进行加载。</p> <ul><li>async：下载完就执行</li></ul> <p>一旦下载完，渲染引擎就会中断渲染，执行完这个脚本后，再继续完成之前的渲染，多个 async 脚本是不能保证加载顺序的。</p> <h2 id="面试题"><a href="#面试题" class="header-anchor">#</a> 面试题</h2> <h3 id="假设高度已知-请写出三栏布局-其中左栏、右栏宽度各为-300px-中间自适应"><a href="#假设高度已知-请写出三栏布局-其中左栏、右栏宽度各为-300px-中间自适应" class="header-anchor">#</a> 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为 300px，中间自适应</h3> <ul><li><a href="/learn/css/#flex-布局">flex</a></li> <li><a href="http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html" target="_blank" rel="noopener noreferrer">grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>float</li> <li>position: absolute</li> <li>display: table</li></ul> <h3 id="ccs-盒模型"><a href="#ccs-盒模型" class="header-anchor">#</a> CCS 盒模型</h3> <ul><li>基本概念：标准模型 + IE 模型 <a href="/learn/css/#盒子模型">传送门</a></li> <li>标准模型和 IE 模型到区别 <a href="/learn/css/#盒子模型">传送门</a></li> <li>CSS 如何设置这两种模型 <a href="/learn/css/#盒子模型">传送门</a></li> <li>JS 如何设置获取盒模型对应的宽和高<div class="language- extra-class"><pre class="language-text"><code>1. element.style.width/height
   只能获取内联样式设置的宽高，获取不了style节点或者link引入的外部样式设置的宽高

2. element.currentStyle.width/height
   能拿到渲染后设置的宽高，但只有 IE 支持

3. window.getComputedStyle(element).width/height
   能拿到渲染后设置的宽高，返回字符串：'300px'

4. element.getBoundingClientRect().width/height
   现在基本用这个，返回元素大小和其相对视窗的位置，返回整数：300
</code></pre></div></li> <li>实例题（根据盒模型解释边距重叠）</li> <li>BFC（边距重叠解决方案）</li></ul> <h3 id="dom-事件"><a href="#dom-事件" class="header-anchor">#</a> DOM 事件</h3> <ul><li>基本概念：DOM 事件的级别
<ul><li>DOM0 element.onclick = function(){}</li> <li>DOM2 element.addEventListener('click', function(){}, false)</li> <li>DOM3 element.addEventListener('keyup', function(){}, false)</li></ul></li> <li>DOM 事件模型
<ul><li>事件捕获</li> <li>事件冒泡</li></ul></li> <li>DOM 事件流
<ul><li>事件通过捕获到达目标元素，然后在目标元素再冒泡到 window 对象</li></ul></li> <li>描述 DOM 事件捕获的具体流程
<ul><li>window -&gt; document -&gt; html(document.documentElement) -&gt; body -&gt; ... -&gt; Element -&gt; ... -&gt; body -&gt; html -&gt; document -&gt; window</li></ul></li> <li>Event 对象的常见应用
<ul><li>event.preventDefault() 阻止默认行为</li> <li>event.stopPropagation() 阻止冒泡</li> <li>event.stopImmediatePropagation() 阻止下一个事件发生（当一个元素上有多个事件时）</li> <li>event.currentTarget 返回绑定事件的元素</li> <li>event.target 返回触发事件的元素</li></ul></li> <li>自定义事件
<ul><li><a href="https://segmentfault.com/a/1190000018699594" target="_blank" rel="noopener noreferrer">Event 与 CustomEvent<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> ev <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'customEvent'</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> ev2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CustomEvent</span><span class="token punctuation">(</span><span class="token string">'customEvent2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'rixin'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 可传参</span>
<span class="token keyword">let</span> html <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement
html<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'customEvent'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'custom event'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
html<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span>ev<span class="token punctuation">)</span> <span class="token comment">// 触发事件</span>
</code></pre></div></li></ul> <h3 id="http"><a href="#http" class="header-anchor">#</a> HTTP</h3> <ul><li><p>HTTP 协议的主要特点</p> <ul><li>简单快速</li> <li>灵活</li> <li>无连接：连接完就会断掉</li> <li>无状态：但就 HTTP 来说，客户端服务端是无法区分身份的</li></ul></li> <li><p>HTTP 报文的组成部分</p> <ul><li>请求报文（请求行(请求类型、地址、协议版本)、请求头（key-value）、空行、请求体）</li> <li>响应报文（状态行(协议版本、状态码)、响应头（key-value）、空行、响应体）</li></ul></li> <li><p>HTTP 方法</p> <ul><li>GET 获取资源</li> <li>POST 传输资源</li> <li>PUT 更新资源</li> <li>DELETE 删除资源</li> <li>HEAD 获得报文首部</li></ul></li> <li><p>POST 和 GET 的区别</p> <ul><li>GET 在浏览器回退时是无害的，而 POST 会再次提交请求</li> <li>GET 产生的 URL 地址 可以被收藏，而 POST 不可以</li> <li>GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设置</li> <li>GET 请求只能进行 url 编码，而 POST 支持多种编码方式</li> <li>GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留</li> <li>GET 请求在 url 中传送的参数是有长度限制的，而 POST 没有限制</li> <li>对参数的数据类型，GET 只接受 ASCII 字符，而 POST 没有限制</li> <li>GET 比 POST 更不安全，因为参数直接暴露在 url 上，所以不能用来传递敏感信息</li> <li>GET 参数通过 url 传递，POST 可以放在 Request body 中</li></ul></li> <li><p>HTTP 状态码</p> <ul><li>1xx：指示信息 - 表示请求已接收，继续处理</li> <li>2xx：成功 - 表示请求已被成功接收</li> <li>3xx：重定向 - 要完成请求必须进行更进一步的操作</li> <li>4xx：客户端错误 - 请求有语法错误或请求无法实现</li> <li>5xx：服务器错误 - 服务器未能实现合法的请求</li></ul></li> <li><p>什么是持久连接</p> <p>HTTP/1.1 后才支持持久链接</p> <p>HTTP 协议采用「请求-应答」模式，当使用普通模式，即非 Keep-Alive 模式时，每个请求/应答客户端和服务器都要新建一个连接，完成之后立即断开连接（HTTP 协议为无连接的协议）</p> <p>当使用 Keep-Alive 模式（又称持久连接、连接重用）时，Keep-Alive 功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接</p></li> <li><p>什么是管线化</p> <p>在使用持久连接的情况下，某个连接上消息的传递类似于：</p> <p>请求1 -&gt; 响应1 -&gt; 请求2 -&gt; 响应2 -&gt; 请求3 -&gt; 响应3</p> <p>管线化后，某个连接上的消息变成了类似这样：</p> <p>请求1 -&gt; 请求2 -&gt; 请求3 -&gt; 响应1 -&gt; 响应2 -&gt; 响应3</p> <ul><li>管线化机制通过持久连接完成，仅 HTTP/1.1 支持此技术</li> <li>只有 GET 和 HEAD 请求可以进行管线化，而 POST 则有所限制</li> <li>初次创建连接时不应启动管线机制，因为服务器不一定支持 HTTP/1.1 版本的协议</li> <li>管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变</li> <li>HTTP/1.1 要求服务器支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可</li> <li>由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因此现代浏览器如 Chrome 和 FireFox 默认并未开启管线化支持</li></ul></li></ul> <h3 id="原型链"><a href="#原型链" class="header-anchor">#</a> 原型链</h3> <ul><li>创建对象有几种方法<div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 1. 字面量</span>
<span class="token keyword">let</span> o1 <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'o1'</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> o11 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'o11'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 2. 通过构造函数</span>
<span class="token keyword">let</span> <span class="token function-variable function">O</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">}</span>
<span class="token keyword">let</span> o2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">O</span><span class="token punctuation">(</span><span class="token string">'o2'</span><span class="token punctuation">)</span>
<span class="token comment">// 3. Object.create</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'o3'</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> o3 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
</code></pre></div></li> <li>原型、构造函数、实例、原型链 <a href="/learn/js/point.html#原型-原型链">传送门</a> <img src="https://img.imgdb.cn/item/603209c05f4313ce25033c0e.png" alt=""><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> <span class="token function-variable function">O</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name<span class="token punctuation">}</span>
<span class="token keyword">let</span> o2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">O</span><span class="token punctuation">(</span><span class="token string">'o2'</span><span class="token punctuation">)</span>
<span class="token comment">// 构造函数-&gt; O，实例-&gt;o2</span>
<span class="token class-name">O</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">===</span> <span class="token constant">O</span> <span class="token comment">// true</span>
<span class="token class-name">O</span><span class="token punctuation">.</span>prototype <span class="token operator">===</span> o2<span class="token punctuation">.</span>__proto__ <span class="token comment">// true</span>
<span class="token constant">O</span><span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Function</span><span class="token punctuation">.</span>prototype <span class="token comment">// true</span>
</code></pre></div></li> <li>instanceof 的原理 <a href="/learn/js/point.html#instanceof">传送门</a> <ul><li>对象的 <strong>proto</strong> 与 函数的 prototype 在同一条原型链上</li></ul></li> <li>new 运算符</li></ul> <h3 id="通信"><a href="#通信" class="header-anchor">#</a> 通信</h3> <ul><li><p>什么是同源策略及限制
同源策略限制一个源加载对文档或脚本如何与来自另一个源对资源进行交互。这是一个用于隔离潜在恶意文件对关键对安全机制</p> <p>同源指的是：协议、域名、端口相同</p> <ul><li>Cookie、LocalStorage 和 IndexDB 无法读取</li> <li>DOM 无法获取</li> <li>AJAX 请求不能发送</li></ul></li> <li><p>前后端如何通信</p> <ul><li>AJAX 只支持同源</li> <li>WebSocket</li> <li>CORS</li></ul></li> <li><p>如何创建 Ajax</p> <ul><li>XMLHttpRequest 对象的工作流程<div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/'</span><span class="token punctuation">)</span>
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
xhr<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div></li> <li>兼容性处理</li> <li>事件的触发条件</li> <li>事件的触发顺序</li></ul></li> <li><p>跨域通信的几种方式</p> <ul><li>JSONP</li> <li>Hash</li> <li>postMessage</li> <li>WebSocket</li> <li>CORS</li></ul></li></ul> <h3 id="安全"><a href="#安全" class="header-anchor">#</a> 安全</h3> <ul><li><p>CSRF「跨站请求伪造」
<img src="https://img.imgdb.cn/item/60325c725f4313ce2528bd39.png" alt="">
条件：网站接口存在漏洞、用户登录过该网站</p> <p>防御措施：</p> <ul><li>Token 验证</li> <li>Referer 验证</li> <li>隐藏令牌</li></ul></li> <li><p>XSS「跨域脚本攻击」
在提交内容里注入 JavaScript 脚本进行攻击</p> <p>防御措施：</p> <ul><li>对提交内容进行过滤，对特定字符进行转义</li></ul> <p><a href="https://zhuanlan.zhihu.com/p/26177815" target="_blank" rel="noopener noreferrer">浅谈XSS攻击的那些事（附常用绕过姿势）<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ul> <h3 id="渲染机制"><a href="#渲染机制" class="header-anchor">#</a> 渲染机制</h3> <ul><li><p>什么是 DOCTYPE 及其作用</p> <ul><li>DTD（文档类型定义）是一系列的语法规则，用来定义 XML 或 (X)HTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式</li> <li>DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错</li> <li>HTML5：&lt;!DOCTYPE html&gt;，HTML4.01 有两个模式，严格模式（不包括展示性或弃用的元素）/宽松模式</li></ul></li> <li><p>浏览器渲染过程</p></li> <li><p>重排 Reflow
DOM 结构中的各个元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为 Reflow</p> <p>什么情况下会触发 Reflow</p> <ul><li>当增加、删除、修改 DOM 节点时，会导致 Reflow 或 Repaint</li> <li>当移动 DOM 的位置，或是搞个动画的时候</li> <li>当修改 CSS 样式的时候</li> <li>当 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候</li> <li>当修改网页的默认字体时</li></ul></li> <li><p>重绘 Repaint
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便会把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了。这个过程称之为 Repaint</p> <p>什么情况下会触发 Repaint</p> <ul><li>DOM 改动</li> <li>CSS 改动</li></ul></li> <li><p>布局 Layout</p></li></ul> <h3 id="运行机制"><a href="#运行机制" class="header-anchor">#</a> 运行机制</h3> <ul><li>宏任务：setTimeout、setInterval、DOM 事件</li> <li>微任务：Promise</li></ul> <h3 id="页面性能"><a href="#页面性能" class="header-anchor">#</a> 页面性能</h3> <p>提升页面性能的方法有哪些？</p> <ul><li><p>资源压缩合并，减少 HTTP 请求</p></li> <li><p>非核心代码异步加载。</p> <p>异步加载的方式？</p> <ul><li>动态脚本加载（也就是在 js 中动态添加 script 标签）</li> <li>defer</li> <li>async</li></ul> <p>异步加载的区别？ <a href="/learn/html/#defer-和-async-的区别">传送门</a></p></li> <li><p>利用浏览器缓存。</p> <p>缓存的分类？</p> <ul><li>强缓存<div class="language- extra-class"><pre class="language-text"><code>Expires Expires:Thu,21 Jan 2020:17:35:09 GMT
Cache-Control Cache-Control:max-age=3600
</code></pre></div></li> <li>协商缓存<div class="language- extra-class"><pre class="language-text"><code>Last-Modified If-Modified-Since Last-Modified:Thu,21 Jan 2020:17:35:09 GMT
Etag  If-None-Match
</code></pre></div></li></ul> <p>缓存的原理？</p></li> <li><p>使用 CDN</p></li> <li><p>预解析 DNS</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>x-dns-prefetch-control<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dns-prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>//host_name_to_prefetch.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="错误监控"><a href="#错误监控" class="header-anchor">#</a> 错误监控</h3> <ul><li>前端错误的分类
<ul><li>即时运行错误，也就是代码错误</li> <li>资源加载错误</li></ul></li> <li>错误的捕获方式
<ul><li>即时运行错误：1. try...catch  2. window.onerror</li> <li>资源加载错误：1. object.onerror  2. performance.getEntries()  3. Error 事件捕获</li> <li>延伸：跨域的 js 运行错误可以捕获吗？错误提示什么？应该怎么处理？
<ul><li>在 script 标签增加 crossorigin 属性</li> <li>设置 js 资源响应头 Access-Control-Allow-Origin:*</li></ul></li></ul></li> <li>上报错误的基本原理
<ul><li>采用 Ajax 通信的方式上报</li> <li><strong>利用 Image 对象上报</strong><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'http://baidu.com/tesjk?r=task'</span>
</code></pre></div></li></ul></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">3/3/2021, 5:29:50 PM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.0696c23a.js" defer></script><script src="/assets/js/2.96f039f8.js" defer></script><script src="/assets/js/15.e0473034.js" defer></script>
  </body>
</html>
